<!-- 会议消息 -->
<template>
  <app-page card full>
    <template #header>
      <div class="app-flex-space-between app-flex-mid">
        编辑会议资料
        <el-button type="success" plain @click="addMeet" size="small">添加会议资料</el-button>
      </div>
    </template>

    <template v-if="pageData.detail.files?.length > 0">
      <jax-info v-for="(item, index) in pageData.detail?.files" :title="`会议资料${index + 1}`">
        <template #header-right>
          <el-button class="delete-btn" type="danger" plain @click="handleDelete(index)">删除</el-button>
        </template>

        <el-form-item label="会议资料名称" style="width: 500px">
          <el-input v-model="pageData.detail.files[index].fileName" placeholder="请输入" clearable />
        </el-form-item>

        <el-form-item label="会议资料" style="width: 500px">
          <Uploads v-model="pageData.detail.files[index].url">
            <template #tip>
              <div class="upload-btn-tips">文件格式支持 pdf、mp4</div>
            </template>
          </Uploads>
          <!-- <jax-upload
            v-model="pageData.detail.files[index].url"
            type="file"
            :inputAttr="{
              multiple: false,
              accept:
                'application/pdf, .mp4',
            }"
            tips="文件格式支持 pdf、mp4"
          /> -->
        </el-form-item>
        <FileItem v-model="pageData.detail.files[index]" />
      </jax-info>
    </template>

    <el-empty v-else description="暂无数据，请点击右上角添加会议资料" />

    <template #footer>
      <div class="app-toolbar">
        <el-button type="default" @click="pageActions.handleCancel()">返回</el-button>
        <el-button type="primary" @click="pageActions.handleDirectSubmit(true, true)">保存</el-button>
      </div>
    </template>
  </app-page>
</template>

<script setup>
import { usePageEdit, http } from 'jax-node'
import FileItem from '../components/ImportUsers.vue'
import Uploads from '@/components/form/Uploads.vue'
import { ElMessageBox } from 'element-plus'

const { pageData, pageActions } = usePageEdit({
  api: 'meet/file',
})

const route = useRoute()
pageActions.getData = async () => {
  await http
    .get(pageData.api, {
      params: {
        meetId: route.query.id,
        categoryId: route.query.categoryId,
      },
    })
    .then(res => {
      pageData.detail = res
    })
}

const addMeet = () => {
  const defaultData = {
    url: '',
    users: [],
    isOpen: false,
  }

  pageData.detail.files.push({ ...defaultData })
}

const handleDelete = index => {
  ElMessageBox.confirm('是否确定删除?', '温馨提示', {
    type: 'warning',
  }).then(() => {
    pageData.detail.files.splice(index, 1)
  })
}
</script>

<style lang="scss" scoped>
.delete-btn {
  margin-left: 40px;
}
.upload-btn-tips {
  font-size: 12px;
  color: var(--el-text-color-regular);
}
</style>
